import { Tooltip } from "antd"
import JsonViewer from '@uiw/react-json-view';
import { useModel } from "@umijs/max";
import { lightTheme } from '@uiw/react-json-view/light';
import { darkTheme } from '@uiw/react-json-view/dark';

const CustomCode = ({
    value,
    width = 400,
    height = 200,
}: {
    width?: number;
    height?: number;
    value?: any;
    [key: string]: any
}) => {
    const { initialState } = useModel('@@initialState')

    let jsonObj = ['null', '-'].includes(value) ? {} : (value || {})

    try {
        jsonObj = typeof value === 'string' ? JSON.parse(value) : value
        jsonObj = typeof jsonObj === 'string' ? JSON.parse(jsonObj) : jsonObj
    } catch (e) {
        jsonObj = {}
    }

    const theme = initialState?.settings?.navTheme === 'light' ? lightTheme : darkTheme

    const title = <div style={{
        maxHeight: height,
        width,
        overflow: 'auto'
    }}>
        <JsonViewer
            style={theme}
            value={jsonObj}
            displayDataTypes={false} />
    </div>
    return !['null', '-'].includes(value) && value ? <Tooltip title={title}
        color={initialState?.settings?.navTheme === 'light' ? '#fff' : undefined}
        overlayInnerStyle={{ width: width + 18 }}
    >
        <div style={{
            // height: '100%',
            height: 30,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            backgroundColor: 'rgba(150, 150, 150, 0.1)',
            padding: '5px 10px',
            width: width / 2,
            display: 'inline-flex',
            alignSelf: 'center',
        }}>
            <JsonViewer
                collapsed
                style={theme}
                value={jsonObj}
                displayDataTypes={false} />
        </div>
    </Tooltip> : <>-</>
}

export default CustomCode
